<template>
  <a-modal class="group-form" v-model:visible="visible" :title="title" @ok="handleOk" :maskClosable="false">
    <a-form :model="formState" :rules="formRules" layout="vertical" ref="form">
      <a-form-item label="分组名称" name="groupName">
        <a-input v-model:value="formState.groupName" placeholder="分组名称" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
/**
 * 分组表单 弹框
 * @author 朱琦
 * @date   时间：2023/1/12
 */
export default {
  name: 'GroupForm',
  components: {},
  data() {
    return {
      visible: false,
      isAdd: false,
      formState: {
        groupName: null
      },
      formRules: {
        groupName: [{ required: true, message: '请输入分组名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      const text = this.isAdd ? '新增' : '编辑'
      return text + '分组'
    }
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 点击确定
     */
    handleOk() {
      this.$refs.form.validate().then(res => {
        this.$emit('submit', this.formState, this.isAdd)
      })
    },
    /**
     * 显示弹框
     * @param {Boolean} isAdd 是否是新增
     * @param {Object} data 修改时的数据
     */
    show(isAdd = true, data) {
      this.visible = true
      this.isAdd = isAdd
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        !isAdd && this.setData(data)
      })
    },
    /**
     * 关闭弹框
     */
    hide() {
      this.visible = false
    },
    /**
     * 设置表单数据
     * @param {Object} data
     */
    setData(data) {
      this.formState = { ...data }
    }
  }
}
</script>

<style scoped lang="less">
.group-form {
}
</style>
